<template>
  <a-modal
    title="汇付账号"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
       <a-row>
         <a-col :span="12">
           <a-form-item label="企业用户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入企业用户名称"
               v-model="form.regName"
               v-decorator.trim="['enterpriseUserMsgVO.regName', { rules: [{ required: true, message: '请输入企业用户名称！' }] }]"
             />
           </a-form-item>
         </a-col>

       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="营业执照编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入营业执照编号"
               v-decorator.trim="['enterpriseUserMsgVO.licenseCode', { rules: [{ required: true, message: '请输入营业执照编号！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="证照有效期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择证照有效期类型"
               v-decorator.trim="['enterpriseUserMsgVO.licenseValidityType', { rules: [{ required: true, message: '请选择证照有效期类型！' }] }]"
               style="width: 100%"
             >
               <a-select-option value="1">长期有效</a-select-option>
               <a-select-option value="0">非长期有效</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>

       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="证照有效期起始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-date-picker
               placeholder="请选择证照有效期起始日期"
               style="width: 100%"
               v-decorator="['enterpriseUserMsgVO.licenseBeginDate', { rules: [{ required: true, message: '证照有效期起始日期！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="证照有效期结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-date-picker
               placeholder="请选择证照有效期结束日期(非长期有效时必填)"
               style="width: 100%"
               v-decorator="['enterpriseUserMsgVO.licenseEndDate', { rules: [{ required: false, message: '证照有效期结束日期！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="注册地址(省)" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择注册地址(省)"
               v-decorator.trim="['enterpriseUserMsgVO.regProvId', { rules: [{ required: true, message: '请选择注册地址(省)！' }] }]"
               style="width: 100%"
               @change="changeProvId"
             >
               <a-select-option :value="item.code" v-for="(item,index) in provinceList" :key="index">{{item.name}}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="注册地址(市)" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择注册地址(市)"
               v-decorator.trim="['enterpriseUserMsgVO.regAreaId', { rules: [{ required: true, message: '请选择注册地址(市)！' }] }]"
               style="width: 100%"
               @change="changeCityId"
             >
               <a-select-option :value="item.code" v-for="(item,index) in regDistrictList" :key="index">{{item.name}}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="注册地址(区)" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择注册地址(区)"
               v-decorator.trim="['enterpriseUserMsgVO.regDistrictId', { rules: [{ required: true, message: '请选择注册地址(区)！' }] }]"
               style="width: 100%"
             >
               <a-select-option :value="item.code" v-for="(item,index) in gareaList" :key="index">{{item.name}}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入详细地址"
               v-decorator.trim="['enterpriseUserMsgVO.regDetail', { rules: [{ required: true, message: '请输入详细地址！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="法人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入法人姓名"
               v-decorator.trim="['enterpriseUserMsgVO.legalName', { rules: [{ required: true, message: '请输入法人姓名！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="法人证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择法人证件类型"
               v-decorator.trim="['enterpriseUserMsgVO.legalCertType', { rules: [{ required: true, message: '请选择法人证件类型！' }] }]"
               style="width: 100%"
             >
               <a-select-option :value="item.code" v-for="(item,index) in typeCodeList" :key="index">{{item.type}}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="法人证件号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入法人证件号码"
               v-decorator.trim="['enterpriseUserMsgVO.legalCertNo', { rules: [{ required: true, message: '请输入法人证件号码！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="法人证件有效期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择证件有效期类型"
               v-decorator.trim="['enterpriseUserMsgVO.legalCertValidityType', { rules: [{ required: true, message: '请选择证件有效期类型！' }] }]"
               style="width: 100%"
             >
               <a-select-option value="1">长期有效</a-select-option>
               <a-select-option value="0">非长期有效</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="法人证件有效开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-date-picker
               placeholder="法人证件有效期开始日期"
               style="width: 100%"
               v-decorator="['enterpriseUserMsgVO.legalCertBeginDate', { rules: [{ required: true, message: '请选择法人证件有效期开始日期！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="法人证件有效截止日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-date-picker
               placeholder="法人证件有效期截止日期(非长期有效时必填)"
               style="width: 100%"
               v-decorator="['enterpriseUserMsgVO.legalCertEndDate', { rules: [{ required: false, message: '请选择法人证件有效期截止日期！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="联系人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入联系人姓名"
               v-decorator.trim="['enterpriseUserMsgVO.contactName', { rules: [{ required: true, message: '请输入联系人姓名！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="联系人手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入联系人手机号"
               v-decorator.trim="['enterpriseUserMsgVO.contactMobile', { rules: [{ required: true, message: '请输入联系人手机号！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="手续费" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input-number
               placeholder="请输入手续费"
               :min="0" :max="10" :step="0.001"
               style="width: 100%"
               v-decorator.trim="['enterpriseUserMsgVO.commission', { rules: [{ required: true, message: '请输入手续费！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="卡类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择卡类型"
               v-decorator.trim="['userBusinessSettleMsgVO.cardType', { rules: [{ required: true, message: '请选择卡类型！' }] }]"
               style="width: 100%"
             >
               <a-select-option value="0">对公</a-select-option>
               <a-select-option value="1">对私</a-select-option>
               <a-select-option value="2">对私非法人</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="卡户名" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入卡户名"
               v-decorator.trim="['userBusinessSettleMsgVO.cardName', { rules: [{ required: true, message: '请输入卡户名！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="卡号" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入卡号"
               v-decorator.trim="['userBusinessSettleMsgVO.cardNo', { rules: [{ required: true, message: '请输入卡号！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="银行所在省" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择银行所在省"
               v-decorator.trim="['userBusinessSettleMsgVO.provId', { rules: [{ required: true, message: '请选择银行所在省！' }] }]"
               style="width: 100%"
               @change="changeProvId2"
             >
               <a-select-option :value="item.code" v-for="(item,index) in provinceList" :key="index">{{item.name}}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="银行所在市" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择银行所在市"
               v-decorator.trim="['userBusinessSettleMsgVO.areaId', { rules: [{ required: true, message: '请选择银行所在市！' }] }]"
               style="width: 100%"
             >
               <a-select-option :value="item.code" v-for="(item,index) in regDistrictList2" :key="index">{{item.name}}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="银行号" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入银行号(对公必填)"
               v-decorator.trim="['userBusinessSettleMsgVO.bankCode', { rules: [{ required: false, message: '请输入银行号！' }] }]"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="支行名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入支行名称(对公必填)"
               v-decorator.trim="['userBusinessSettleMsgVO.branchName', { rules: [{ required: false, message: '请输入支行名称！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="持卡人证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择法人证件类型(对私必填)"
               v-decorator.trim="['userBusinessSettleMsgVO.certType', { rules: [{ required: false, message: '请选择法人证件类型！' }] }]"
               style="width: 100%"
             >
               <a-select-option :value="item.code" v-for="(item,index) in typeCodeList" :key="index">{{item.type}}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="持卡人证件号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input
               placeholder="请输入持卡人证件号码(对私必填)"
               v-decorator.trim="['userBusinessSettleMsgVO.certNo', { rules: [{ required: false, message: '请输入持卡人证件号码！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="持卡人有效期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select
               ref="select"
               placeholder="请选择证照有效期类型(对私必填)"
               v-decorator.trim="['userBusinessSettleMsgVO.certValidityType', { rules: [{ required: false, message: '请选择证照有效期类型！' }] }]"
               style="width: 100%"
             >
               <a-select-option value="1">长期有效</a-select-option>
               <a-select-option value="0">非长期有效</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="持卡人证件起始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-date-picker
               placeholder="持卡人证件起始日期(对私必填)"
               style="width: 100%"
               v-decorator="['userBusinessSettleMsgVO.certBeginDate', { rules: [{ required: false, message: '请选择持卡人证件起始日期！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-form-item label="持卡人证件截止日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-date-picker
               placeholder="截止日期(对私且类型为非长期有效必填)"
               style="width: 100%"
               v-decorator="['userBusinessSettleMsgVO.certEndDate', { rules: [{ required: false, message: '请选择持卡人证件截止日期！' }] }]"
             />
           </a-form-item>
         </a-col>
       </a-row>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { sysTenantAdd } from '@/api/modular/system/roleManage'
import {
  getHuifuMsg,
  getProvinceCode,
  getCityCode,
  getAreaCode,
  getDocumentTypeCode,
  settleOrUpdateCommission
} from '@/api/modular/system/menuManage'
import moment from 'moment'
export default {
  data() {
    return {
      id:'',
      typeCodeList:[],
      regDistrictList:[],
      regDistrictList2:[],
      provinceList:[],
      gareaList:[],
      infoData:{
        isSettleIn:false,
        provinceId:'',
        provId:''
      },
      autoExpandParent: true,
      expandedKeys: [],
      menuTreeData: [],
      selectedKeys: [],
      replaceFields: {
        key: 'id'
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    // 初始化方法
    edit(e) {
      this.id = e.id
      this.visible = true
      this.roleMenu()
    },
    // 初始化方法
    roleMenu () {
      this.getProvinceCode()
      this.getDocumentTypeCode()
    },
    getDocumentTypeCode(e){
      getDocumentTypeCode().then((res) => {
        if (res.success) {
          this.typeCodeList = res.data
        }
      })
    },
    changeProvId2(e){
      // 根据code去找id
      this.provinceList.find(item =>{
        if(item.code == e){
          this.infoData.provId = item.id
          this.getCityCode2(this.infoData.provId)
        }
      })
    },
    getCityCode2(provId){
      getCityCode({
        provinceId:provId
      }).then((res) => {
        if (res.success) {
          this.regDistrictList2 = res.data
        }
      })
    },
    changeProvId(e){
      // 根据code去找id
      this.provinceList.find(item =>{
        if(item.code == e){
          this.infoData.provinceId = item.id
          this.getCityCode(this.infoData.provinceId)
        }
      })
    },
    changeCityId(e){
      // 根据code去找id
      this.regDistrictList.find(item =>{
        if(item.code == e){
          this.infoData.cityId = item.id
          this.getAreaCode(this.infoData.cityId)
        }
      })
    },
    getProvinceCode(){
      getProvinceCode().then((res) => {
        if (res.success) {
          this.provinceList = res.data
             }
        })
    },
    getCityCode(provinceId){
      getCityCode({
        provinceId:provinceId
      }).then((res) => {
        if (res.success) {
          this.regDistrictList = res.data
        }
      })
    },

    getAreaCode(cityId){
      getAreaCode({
        cityId:cityId
      }).then((res) => {
        if (res.success) {
          this.gareaList = res.data
        }
      })
    },

    handleSubmit() {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.enterpriseUserMsgVO.tenantId = this.id
            values.enterpriseUserMsgVO.licenseBeginDate = values.enterpriseUserMsgVO.licenseBeginDate && moment(values.enterpriseUserMsgVO.licenseBeginDate).format("YYYYMMDD");
            values.enterpriseUserMsgVO.licenseEndDate = values.enterpriseUserMsgVO.licenseEndDate && moment(values.enterpriseUserMsgVO.licenseEndDate).format("YYYYMMDD");
            values.enterpriseUserMsgVO.legalCertBeginDate = values.enterpriseUserMsgVO.legalCertBeginDate && moment(values.enterpriseUserMsgVO.legalCertBeginDate).format("YYYYMMDD");
            values.enterpriseUserMsgVO.legalCertEndDate = values.enterpriseUserMsgVO.legalCertEndDate && moment(values.enterpriseUserMsgVO.legalCertEndDate).format("YYYYMMDD");
            values.userBusinessSettleMsgVO.certBeginDate = values.userBusinessSettleMsgVO.certBeginDate && moment(values.userBusinessSettleMsgVO.certBeginDate).format("YYYYMMDD");
            values.userBusinessSettleMsgVO.certEndDate = values.userBusinessSettleMsgVO.certEndDate && moment(values.userBusinessSettleMsgVO.certEndDate).format("YYYYMMDD");
          settleOrUpdateCommission(values)
            .then(res => {
              if (res.success) {
                this.$message.success('新增成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>
